import React from 'react'
import {Table, Button, Divider } from 'antd'
import { connect } from 'react-redux'
import Axios from 'axios';

class Goods extends React.PureComponent{
  columns = [
    {
      title: '商品ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '商品单价',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => {
        console.log(text, record)
        return (
          <span>
            <Button type="primary" onClick={this.props.addCard.bind(this, record, this.props.cardList)}>添加</Button>
            <Divider type="vertical" />
            <Button type="danger" onClick={this.props.delCard.bind(this, record, this.props.cardList)}>删除</Button>
          </span>
        )
      }
    }
  ];

  state = {
    GoodList: []
  }
  render() {
    const {GoodList} = this.state
    return (
      <div>
        <h2>商品列表</h2>
        <hr/>
        <Table rowKey='id' dataSource={GoodList} columns={this.columns} />
      </div>
    )
  }

  //获取商品列表信息
  getGoodList () {
    Axios.get('http://localhost:9090/goods').then(res => {
      const {data} = res
      this.setState({
        GoodList: data
      })
    })
  }

  componentDidMount() {
    this.getGoodList()
  }
}

export default connect(
  (state) => {//拿出仓库cards数据，来判读是否新增还是修改
    return ({
      cardList: state.CardList
    })
  },
  (dispatch) => ({// 箭头函数简写，省略了return
    addCard (good, cardList) {
      // 请求数据库，是新增(post)，还是修改(put)
      let index = cardList.findIndex(item => item.goodId === good.id)
      if(index > -1) {
        //表示仓库中有该商品，做修改put
        Axios.patch(`http://localhost:9090/cards/${good.id}`,{
          goodNum: cardList[index].goodNum +1
        }).then(res => {
          dispatch({
            type: 'ADD_TODO',
            good
          })
        })
      } else {
        // 不存在，做追加post
        Axios.post('http://localhost:9090/cards',{
          "id": good.id,
	      	"goodId": good.id,
	      	"goodName": good.name,
	      	"goodPrice": good.price,
	      	"goodNum": 1
        }).then(res => {
          dispatch({
            type: 'ADD_TODO',
            good
          })
        })
      }
    },
    delCard (good, cardList) {
      // 判断是delete还是patch
      let index = cardList.findIndex(item => item.goodId === good.id)
      if(index <= -1) {
        // 表示不存在，直接return出去
        return
      } else {
        // 判读要删商品的数量在数据库中是多少
        if(cardList[index].goodNum === 1) {
          //直接删除
          Axios.delete(`http://localhost:9090/cards/${good.id}`,).then(res => {
            dispatch({
              type: 'DEL_TODO',
              good
            })
          })
        } else {
          // 修改
          Axios.patch(`http://localhost:9090/cards/${good.id}`,{
            goodNum: cardList[index].goodNum - 1
          }).then(res => {
            dispatch({
              type: 'DEL_TODO',
              good
            })
          })
        }
      }
    }
  })
)(Goods)